import React, { useState, useEffect } from 'react';
import { ConfigProvider, Layout, Menu, Breadcrumb } from 'antd';
import checkTimeOut from '../utils/astrict';
import styles from './index.less';
import zhCN from 'antd/es/locale/zh_CN';
import {
  UserOutlined,
  LaptopOutlined,
  NotificationOutlined,
} from '@ant-design/icons';

const { SubMenu } = Menu;
const { Content, Sider } = Layout;
import MyHeader from '@/layouts/components/MyHeader';

const BaseLayout = ({ children }: any) => {
  return (
    <ConfigProvider
      locale={zhCN}
      componentSize={'middle'}
      input={{ autoComplete: 'off' }}
    >
      <Layout onMouseOver={checkTimeOut}>
        <MyHeader></MyHeader>
        <Layout>
          {/*<Sider width={200} className="site-layout-background">*/}
          {/*  <Menu*/}
          {/*    mode="inline"*/}
          {/*    defaultSelectedKeys={['1']}*/}
          {/*    defaultOpenKeys={['sub1']}*/}
          {/*    style={{ height: '100%', borderRight: 0 }}*/}
          {/*  >*/}
          {/*    <SubMenu key="sub1" icon={<UserOutlined />} title="subnav 1">*/}
          {/*      <Menu.Item key="1">option1</Menu.Item>*/}
          {/*      <Menu.Item key="2">option2</Menu.Item>*/}
          {/*      <Menu.Item key="3">option3</Menu.Item>*/}
          {/*      <Menu.Item key="4">option4</Menu.Item>*/}
          {/*    </SubMenu>*/}
          {/*    <SubMenu key="sub2" icon={<LaptopOutlined />} title="subnav 2">*/}
          {/*      <Menu.Item key="5">option5</Menu.Item>*/}
          {/*      <Menu.Item key="6">option6</Menu.Item>*/}
          {/*      <Menu.Item key="7">option7</Menu.Item>*/}
          {/*      <Menu.Item key="8">option8</Menu.Item>*/}
          {/*    </SubMenu>*/}
          {/*    <SubMenu*/}
          {/*      key="sub3"*/}
          {/*      icon={<NotificationOutlined />}*/}
          {/*      title="subnav 3"*/}
          {/*    >*/}
          {/*      <Menu.Item key="9">option9</Menu.Item>*/}
          {/*      <Menu.Item key="10">option10</Menu.Item>*/}
          {/*      <Menu.Item key="11">option11</Menu.Item>*/}
          {/*      <Menu.Item key="12">option12</Menu.Item>*/}
          {/*    </SubMenu>*/}
          {/*  </Menu>*/}
          {/*</Sider>*/}
          <Layout className={styles.layout}>
            <Breadcrumb style={{ margin: '16px 0' }}>
              <Breadcrumb.Item>Home</Breadcrumb.Item>
              <Breadcrumb.Item>List</Breadcrumb.Item>
              <Breadcrumb.Item>App</Breadcrumb.Item>
            </Breadcrumb>
            <Content
              className="site-layout-background"
              style={{
                margin: 0,
                minHeight: 280,
              }}
            >
              {children}
            </Content>
          </Layout>
        </Layout>
      </Layout>
     </ConfigProvider>
  );
};

export default BaseLayout;
